import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter, Route } from 'react-router-dom';
import { Icon, ActivityIndicator, Result, Tools } from 'weaver-mobile';
import { RouteLayout, ListAdvanced } from 'weaver-mobile-page';
import CustomerCard from '../card/Customer';

const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
  wrapProps = {
    onTouchStart: e => e.preventDefault(),
  };
}
const getLabel = Tools.getLabel;

@inject('customerListStore')
@withRouter
@observer
export default class HrmCustomerList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      curCustomerId: ""
    }
  }

  componentWillMount() {
    const { customerListStore, match, params } = this.props;
    let ps = params ? params : match.params;
    customerListStore.doNew(this, { type: "crm_list", ...ps });
  }

  componentDidMount() {
    this.props.customerListStore.doInit();
  }

  componentWillUnmount() {
    this.props.customerListStore.doClear();
  }

  render() {
    const store = this.props.customerListStore;
    const { initResponsed, initSuccessed, initFailedMsg } = store;
    if (initResponsed) {
      if (initSuccessed) {
        const { listAd, customerCardLayout } = store;
        const { curCustomerId } = this.state;
        return (
          <div>
            <div className="crm-list-content">
              <ListAdvanced
                store={listAd}
                hasAdvanceSerach={true}
                rowKey="id"
                searchKey="searchKey"
                onSearch={this.onSearch}
                onRowClick={this.onRowClick.bind(this)}
                conditionFetchOptions={{ url: "/api/crm/mobile/getCustomerCondition?opt=my", method: "GET" }}
                searchBarProps={{ placeholder: getLabel("391028", "名称或地址") }}
              />
            </div>
            <Route
              key={customerCardLayout.id}
              path={customerCardLayout.path}
              render={() => {
                let detailContent = <CustomerCard params={{ id: curCustomerId }} />
                return (
                  <RouteLayout getContainer={() => document.getElementById("root")}>
                    <div
                      key="customerCardLayout"
                      className="wm-route-layout"
                    >
                      {detailContent}
                    </div>
                  </RouteLayout>
                )
              }}
            />
          </div >
        );
      } else {
        return (
          <div>
            <Result
              img={<Icon type="cross-circle-o" className="crm_commerce_initFailedMsg" style={{ fill: '#F13642' }} />}
              title=""
              message={initFailedMsg}
            />
          </div>);
      }
    } else {
      return <div className="crm-bg-loading"><ActivityIndicator text="Loading..." /></div>;
    }
  }

  onRowClick(rowData) {
    const store = this.props.customerListStore;
    const { customerCardLayout } = store;
    this.setState({ curCustomerId: rowData.id });
    this.props.history.push(customerCardLayout.path);
  }

  onSearch = () => {
    this.props.customerListStore.doSearch();
  }
}